import axios from 'axios'
import React, { useEffect, useState } from 'react'
import './messagedetail.css'

const SelectUser = ({ close, onSendData }) => {
    const [data, setData] = useState([])
    const Init = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/selectUser')
        setData(res.data)
    }
    useEffect(() => {
        Init()
    }, [])
    const closeSelectUser = () => {
        close()
    }
    const handleButtonClick = (item) => {
        // const dataToSend = 'hello world'
        onSendData(item);
    };

    return (
        <div >
            {
                data.map((item, index) => {
                    return (
                        <div style={{ borderRadius: '15px' }} key={index} className='selectUserItem'
                            onClick={() => {
                                closeSelectUser()
                                handleButtonClick(item)
                            }}

                        >
                            <img src={item.userImg} style={{ width: '40px' }} />
                            <p style={{ marginLeft: '10px' }}>{item.userTitle}</p>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default SelectUser